<template>
	<view class="tabbar-mask" :style="[{'display':isShow?'block':'none'}]">
		<view class="tabbar-mask-item one" @click="clickItem('1')"></view>
		<view class="tabbar-mask-item two" @click="clickItem('2')"></view>
		<view class="tabbar-mask-item three" @click="clickItem('3')"></view>
		<view class="tabbar-mask-item four" @click="clickItem('4')"></view>
		<view class="tabbar-mask-item five" @click="clickItem('5')"></view>
	</view>
</template>

<script>
import { Tools, Config, URL, Net, VueTools } from '@/common/tools.js';
export default {
	name: 'TabbarMask',
	props:{
		
	},
	data() {
		return {
			indexClock:"-1",
			isShow:false
		};
	},
	mounted(){
		let that=this;
		console.log("tabbar-mask挂载成功");
		//登陆就隐藏蒙蔽层，否则就显示蒙板层
		this.isShow=(VueTools.getStorageSync(Config.IS_LOGIN_STORE_KEY)=="1" || VueTools.getStorageSync(Config.IS_LOGIN_STORE_KEY)==1)?false:true;
		uni.$on('isShowTabMask', function (data) {
			console.log("事件isShowTabMask是否显示底部的tabbar-mask的组件");
		    that.isShow=data.isShow;
		})
	},
	onLoad() {},
	methods: {
		clickItem(indexMark){
			if(this.indexClock!=indexMark){
				uni.navigateTo({
					url: '/pages/my/login/login'
				});
			}
			
		}
	},
	destroyed() {
		console.log("tabbar-mask卸载成功");
		uni.$off("isShowTabMask");
	}
};
</script>

<style lang="scss">
.tabbar-mask {
	position: fixed;
	height: 50px;
	width: 100%;
	background: rgba(255, 0, 0, 0.5);
	bottom: 0px;
	z-index: 1001;
	.tabbar-mask-item {
		width: 20%;
		position: absolute;
		display: block;
		height: 50px;
		text-align: center;
		&.one {
			left: 0px;
		}
		&.two {
			left: 20%;
		}
		&.three {
			left: 40%;
		}
		&.four {
			left: 60%;
		}
		&.five {
			left: 80%;
		}
	}
}
</style>
